<template>
  <div>
    <fx-slider :data="sliderList" :sliderType="'mosaic'" @currentIndex="getCurrentIndex">
        <div style="width: 100%;height: 100%;" v-for="(item,index) in sliderList" :key="item.id">
          <img :src="currentSrc">
          <fx-mosaic :playTime="1000"
                     :playPath="'right'"
                     :playStart="'start'"
                     v-if="currentIndex===index"
                     :img="item.src"></fx-mosaic>
        </div>
    </fx-slider>
  </div>
</template>

<script>
import fxSlider from '@/components/slider.vue'
import fxMosaic from '@/components/mosaic.vue'
import { getHomeData } from '@/services/api.js'
export default {
  name: 'home',
  data () {
    return {
      currentSrc: '',
      currentIndex: 0,
      sliderList: null
    }
  },
  components: {
    fxMosaic,
    fxSlider
  },
  methods: {
    getCurrentIndex (index) {
      console.log(index)
      this.currentIndex = index
      if (this.sliderList[index - 1]) {
        this.currentSrc = this.sliderList[index - 1].src
      } else {
        this.currentSrc = this.sliderList[this.sliderList.length - 1].src
      }
    },
    _getChList () {
      getHomeData().then((res) => {
        console.log('jijj')
        console.log(res)
        this.lists = res
        this.sliderList = res.banner
        this.currentSrc = this.sliderList[0].src
        console.log('slide值')
        console.log(this.sliderList)
      })
    }
  },
  mounted () {
    this._getChList()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
